<template>
	<view class="all">
		<view class="top">
			<view class="top_title">掌柜中心</view>
			<view class="top_bot">
				<view class="kaitong" @click="libao">立即开通</view>
				<view class="top_txt top_txt1">成为尚街掌柜 购物每年最低省5000元</view>
				<view class="top_txt top_txt2">分享玩转最高35%玩转奖金</view>
			</view> 
		</view>
		<view class="content">
			<view class="cona_tit">尚街掌柜权益</view>
			<view class="list">
				<view class="lista">
					<image class="list_img" src="../../static/gouwushengqian.png"></image>
					<view class="list_txt1">购物省钱</view>
					<view class="list_txt2">全场低至1折起</view>
				</view>
				<view class="lista">
					<image class="list_img" src="../../static/fenxiangzhaungqian.png"></image>
					<view class="list_txt1">推广赚钱</view>
					<view class="list_txt2">最高35%推广奖励</view>
				</view>
				<view class="lista">
					<image class="list_img" src="../../static/chuangyejihui.png"></image>
					<view class="list_txt1">超值好礼</view>
					<view class="list_txt2">送399大礼包</view>
				</view>
			</view>
			<view class="list">
				<view class="lista">
					<image class="list_img" src="../../static/tequan.png"></image>
					<view class="list_txt1">代理特权</view>
					<view class="list_txt2">全场低至1折起</view>
				</view>
				<view class="lista">
					<image class="list_img" src="../../static/fenxiang.png"></image>
					<view class="list_txt1">分享卡券</view>
					<view class="list_txt2">全场低至1折起</view>
				</view>
				<view class="lista">
					<image class="list_img" src="../../static/guanjia.png"></image>
					<view class="list_txt1">管家服务</view>
					<view class="list_txt2">全场低至1折起</view>
				</view>
			</view>
		</view>
		<view class="content contentb">
			<image class="conb_img" src="../../static/zgbrijing.png"></image>
			<view class="cona_tit conb_tit">掌柜中心</view>
			<view class="con">
				<view class="cona" v-for="(item, index) in arrList" :key="index" @click="navToDetailPage(item)">
					<image class="cona_img" :src="item.image"></image>
					<view class="con_txt">{{item.title}}</view>
					<view class="con_bot">
						<view>
							<text class="price">￥{{item.price}}</text>
							<!-- <text class="xian">￥:123</text> -->
						</view>
						<view class="mai">购买</view>
					</view>
				</view>
			</view>
			<text class="loading-text">
					{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}</text>
		</view>
		<!-- <view class="cona_tit btns">立即开通尚街掌柜</view> -->
	</view>
</template>

<script>
	import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				arrList:[],
				page:1,
				loadingType: 0,
				contentText: {
					contentdown: "上滑显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				}
			}
		},
		onLoad(option) {
			this.initDat(1);
		},
		methods: {
			//初始化数据
			initDat(){
				let that = this
				this.$http.post('giftbag',{page:1}).then(res => {
					let newsList =[];
					if(res.data.length>15){
						for(var i=0;i<15;i++){
							newsList.push(res.data[i]);
						}
						this.arrList = newsList;
					}else{
						this.arrList = res.data;
					}
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();//得到数据后停止下拉刷新
				})
			},
			navToDetailPage(item) {
				uni.navigateTo({
					url: '/pages/product/product?id=' + item.id +'&isty=1'
				})
			},
			libao(){
				uni.createSelectorQuery().select(".contentb").boundingClientRect((res)=>{
				        uni.pageScrollTo({
				            duration:0,
				            scrollTop:res.top
				        })
				}).exec();
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.loadingType = 0
			this.initDat().then(e => {
				uni.stopPullDownRefresh()
			}).catch(e => {
				uni.stopPullDownRefresh()
			})
		},
		
		//触底加载
		onReachBottom() {
			this.page++;//每触底一次 page +1
			if (this.loadingType != 0) {//loadingType!=0;直接返回
				return false;
			}
			this.loadingType = 1;
			uni.showNavigationBarLoading();//显示加载动画
			this.$http.post('giftbag',{page:this.page}).then(res => {
				if (res.data == null || res.data == '') {//没有数据
					this.loadingType = 2;
					uni.hideNavigationBarLoading();//关闭加载动画
					return;
				}
				this.arrList = this.arrList.concat(res.data);//将数据拼接在一起
				this.loadingType = 0;//将loadingType归0重置
				uni.hideNavigationBarLoading();//关闭加载动画
			})
						
		},
	}
</script>

<style>
	page{
		width: 100%;
	}
	.top{
		width: 100%;
		height: 470upx;
		background: url(../../static/zgbg.png) no-repeat;
		background-size: 100% 65%;
		letter-spacing: 5upx;
	}
	.top_title{
		padding: 70upx 0 20upx 0;
		font-size: 35upx;
		color: #FFF;
		text-align: center;
	}
	.top_bot{
		margin: 20upx;
		height: 300upx;
		background: url(../../static/beijing2.png) no-repeat;
		background-size: 100% 100%;
		position: relative;
	}	
	.kaitong{
		background-color: #FF4937;
		padding: 2upx 6upx 5upx 6upx;
		border-radius: 10upx;
		color: #FFFFFF;
		font-size: 20upx;
		position: absolute;
		top: 20upx;
		right: 20upx;
	}
	.top_txt{
		width: 100%;
		color:#FF4937;
		position: absolute;
		text-align: center;
	}
	.top_txt1{
		bottom: 50upx;
		font-size: 20upx;
	}
	.top_txt2{
		bottom: 15upx;
		font-size: 15upx;
	}
	.content{
		padding: 20upx;
	}
	.contentb{
		padding-bottom: 100upx;
	}
	.cona_tit{
		font-size: 36upx;
		font-weight: 600;
		color: #FF4937;
		font-family: "微软雅黑";
		text-align: center;
		padding-bottom: 20upx;
	}
	.list{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 15upx;
	}
	.lista{
		width: 30%;
		text-align: center;
	}
	.list_img{
		width: 90upx;
		height: 90upx;
	}
	.list_txt1{
		padding: 5upx 0;
		font-size: 30upx;
		color: #333333;
	}
	.list_txt2{
		font-size: 20upx;
		color: gray;
	}
	.conb_img{
		width: 100%;
		height: 150upx;
	}
	.conb_tit{
		padding: 20upx;
	}
	.con{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 25upx;
	}
	.cona{
		border-radius: 10upx 10upx 0 0;
		border: 1upx solid #E0E0E0;
		padding-bottom: 10upx;
		margin-bottom: 30upx;
	}
	.cona_img{
		width: 300upx;
		height: 310upx;
	}
	.con_txt{
		width: 290upx;
		font-size: 30upx;
		padding: 0 10upx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.con_bot{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10upx;
	}
	.price{
		font-size: 30upx;
		color: #FF4937;
	}
	.xian{
		font-size: 20upx;
		color: gray;
		padding-left: 10upx;
		text-decoration: line-through;
	}
	.mai{
		background:#FF4937 ;
		color: #FFF;
		font-size: 15upx;
		padding: 1upx 5upx 3upx 5upx;
		border-radius: 5upx;
	}
	.btns{
		position: fixed;
		bottom: 100upx;
		left: 10%;
		width: 80%;
		background-color: #FF4937;
		padding: 15upx 0 17upx 0;
		color: #FFFFFF;
		border-radius: 30upx;
		font-size: 30upx;
		letter-spacing: 5upx;
	}
	.loading-text{
		height: 80upx;
		line-height: 80upx;
		font-size: 30upx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
</style>
